<template>
  <view class="package_sale" v-for="(item,index) in orderLists" :key="item.id"
    @click="navTo('Sale/customer/customerDeatil?id='+item.driver_id)" :style="{marginTop:index===0?'0px':'10rpx'}">
    <view class="space-between">
      <view class="center">
        <view class="icons">
          <image :src="item.avatar" mode=""></image>
          <text></text>
        </view>
        <view class="center"><text style="max-width: 180rpx; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;display: inline-block;">{{item.nickname}}</text>({{item.driver_id}})</view>
        <view class="Direct">{{item.type}}</view>
      </view>
      <view>{{item.createtime}}</view>
    </view>
    <view class="center" style="flex-wrap: wrap;font-size: 28rpx;" v-if="item.label">
      <view class="but" v-for="(itemIden,indexIden) in JSON.parse(item.label)" :key='indexIden'>{{itemIden}}</view>
    </view>
    <view class="center" style="flex-wrap: wrap;font-size: 28rpx;" v-if="item.cart_code">
      <view v-for="(items,indexs) in JSON.parse(item.cart_code)" :key='indexs' style="margin: 0px 15rpx 10rpx 0px;">
        {{items}}
      </view>
    </view>
    <view class="center" style="flex-wrap: wrap;font-size: 28rpx;" v-if="item.line">
      <view v-for="(item2,index2) in JSON.parse(item.line)" :key='index2' style="margin: 0px 15rpx 10rpx 0px;">{{item2}}
      </view>
    </view>
    <view class="space-between">
      <view style="font-size: 24rpx;">最近加注：{{item.filling_time}}</view>
      <view class="center">
        <view class="text center" @click.stop="nominate(item.driver_id)">
          <image src="../../../static/saleIcon/icon/i.svg" mode="" style="width: 40rpx;height: 35rpx;"></image>
        </view>
        <view class="text" @click.stop="telCall(item.mobile)" v-if="item.mobile">
          <uni-icons type="phone" size="20" color="#1890FF"></uni-icons>
        </view>
        <view class="text" @click.stop="shares(item.avatar,item.nickname,item.image)">
          <uni-icons type="redo" size="20" color="#1890FF"></uni-icons>
        </view>
      </view>
    </view>
  </view>
  <SharePop ref="popup"></SharePop>
  <RecommendPop ref="recommend" :userInfor="userInfor"></RecommendPop>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import { telCall } from '@/utils/copyText';
  import SharePop from '@c/earthPushing/customer/sharePop.vue';
  import RecommendPop from '@c/earthPushing/customer/recommendPop.vue';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { getStaffUsers } from '@/gql/earthPushing/custom';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const popup = ref(null)
  const recommend = ref(null)
  const userInfor = ref()
  const props = defineProps({
    orderLists: {
      type: Object
    },
  });
  function shares(avatar : string, nickname : string, image : string) {
    popup.value.shares(avatar, nickname, image)
  }
  function nominate(id : number) {
    showLoading()
    const payload = {
      query: getStaffUsers,
      variables: {
        driver_id: id,
        staff_id,
      },
    };
    toPublish(
      'ql/staff/getStaffUsers',
      payload,
      (obj : any) => {
        const { getStaffUsers } = obj.data;
        userInfor.value = getStaffUsers
        recommend.value.open()
      }
    );
  }
</script>

<style scoped lang="less">
  .text {
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    border: 1px solid #1890FF;
    text-align: center;
    line-height: 45rpx;
    margin-left: 20rpx;
    justify-content: center;
  }

  .but {
    min-width: 80rpx;
    text-align: center;
    padding: 2rpx 8rpx;
    font-size: 24rpx;
    border: 1px solid #FFA542;
    color: #FFA542;
    border-radius: 10rpx;
    margin: 10rpx;
  }

  .icons {
    width: 60rpx;
    height: 60rpx;
    position: relative;
    margin-right: 10rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }

    text {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #FF1818;
      position: absolute;
      top: 2px;
      right: 5rpx;
    }
  }

  .Direct {
    padding: 4rpx 15rpx;
    box-sizing: border-box;
    background: rgba(67, 142, 247, .1);
    border-radius: 5px;
    color: #438ef7;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
</style>